<template>
  <div style="padding-bottom: 20px;">
    <div class="home">
      <div class="footDown">
        <p>友情链接：</p>
        <el-select :teleported="false" v-model="hyperlink" placeholder="中国红会组织" size="large" style="width: 15%"
          @change="changeSwitch">
          <el-option v-for="(item, i) in options" :key="i" :label="item.name" :value="item.link" />
        </el-select>
        <el-select :teleported="false" v-model="hyperlink2" placeholder="省级红会组织" size="large" style="width: 15%"
          @change="changeSwitch">
          <el-option v-for="(item, i) in options1" :key="i" :label="item.name" :value="item.link" />
        </el-select>
        <el-select :teleported="false" v-model="hyperlink3" placeholder="各市县红会" size="large" style="width: 15%"
          @change="changeSwitch">
          <el-option v-for="(item, i) in options2" :key="i" :label="item.name" :value="item.link" />
        </el-select>
        <el-select :teleported="false" v-model="hyperlink4" placeholder="各区县红会" size="large" style="width: 15%">
          <el-option v-for="(item, i) in options3" :key="i" :label="item.name" :value="item.link" />
        </el-select>
      </div>
    </div>
    <div class="introduce">
      <div>
        <div class="footLeft">
          <p>电话：024-72820007</p>
          <p style="padding:0 20px">地址：铁岭市铁岭县凡河新城区金沙江路26号 </p>
          <p>邮编：112000</p>
        </div>
        <div class="footLeft">
          <p>版权所有：铁岭市红十字会</p>
        </div>
        <div class="footLeft">
          <p>辽ICP备17022084号-1</p>
          <p style="padding:0 20px">辽公网安备21040202000171号</p>
        </div>
      </div>
      <div style="display:flex; color:#000; font-size: 12px;">
        <figure style="margin: 0 10px ; text-align: center;">
          <img src="../assets/official.jpg" alt="">
          <figcaption>官方微信公众号</figcaption>
        </figure>
        <figure style="margin: 0 10px; text-align: center;">
          <img src="../assets/donate.jpg" alt="">
          <figcaption>捐赠二维码</figcaption>
        </figure>
      </div>
    </div>
  </div>
</template>

<script setup name='FootNav'>
import { ref } from 'vue'
const hyperlink = ref()
const hyperlink2 = ref()
const hyperlink3 = ref()
const hyperlink4 = ref()
const options = ref(
  [
    { name: "中国红十字会", link: 'https://www.redcross.org.cn/html/xsdsxjy-zyls/index.html' },
    { name: "中国红十字基金会", link: 'https://www.crcf.org.cn/' },
    { name: "中国红十字志愿者", link: 'https://hszzyz.zhiyuanyun.com/cate/hsz_zyz/' },
    { name: "中国人体器官捐献中心", link: 'https://www.codac.org.cn/' },
  ]
)
const options1 = ref(
  [
    { name: "辽宁省红十字会", link: 'http://www.lnredcross.cn/' },
    { name: "辽宁省红十字基金会", link: 'https://www.lnrcf.org.cn/' },
  ]
)
const options2 = ref(
  [
    { name: "沈阳市红十字会", link: 'http://www.sysredcross.org.cn/' },
    { name: "大连市红十字会", link: 'http://www.dlredcross.org.cn/' },
    { name: "鞍山市红十字会", link: 'http://www.asredcross.org.cn/' },
    { name: "抚顺市红十字会", link: 'http://www.fshsz.gov.cn/' },
    { name: "本溪市红十字会", link: '本溪市红十字会' },
    { name: "丹东市红十字会", link: 'http://www.ddredcross.gov.cn/' },
    { name: "锦州市红十字会", link: 'http://www.jzredcross.com/' },
    { name: "营口市红十字会", link: 'http://www.ykredcross.cn/' },
    { name: "阜新市红十字会", link: 'http://www.fxredcross.org.cn/' },
    { name: "辽阳市红十字会", link: 'https://www.lyredcross.cn/' },
    { name: "朝阳市红十字会", link: 'http://www.cysredcross.gov.cn/channels/49.html' },
    { name: "盘锦市红十字会", link: 'http://www.pjredcross.org.cn/' },
    { name: "葫芦岛市红十字会", link: 'http://www.hldredcross.org.cn/' },

  ]
)
const options3 = ref(
  [
    { name: "银州区红十字会", link: '1' },
    { name: "清河区红十字会", link: '2' },
    { name: "铁岭县红十字会", link: '3' },
    { name: "调兵山市红十字会", link: '4' },
    { name: "开原市红十字会", link: '5' },
    { name: "昌图县红十字会", link: '6' },
    { name: "西丰县红十字会", link: '7' },

  ]
)
const changeSwitch = (val) => {
  if (val != '本溪市红十字会') {
    window.open(val, '_blank') // 在新窗口打开外链接
  }
}
</script>

<style lang="scss" scoped>
.home {
  height: 100px;
  width: 100%;
  background-image: url(../assets/foot.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100px;

  .footDown {
    line-height: 100px;
    display: flex;
    margin-left: 7.5%;
    align-items: center;

    :deep .el-select__placeholder {
      color: #000;
    }

    :deep .el-select__caret {
      color: #000;
    }

    p {
      padding: 0;
      margin: 0;
      color: #fff;
      font-size: 16px;
    }
  }
}

.introduce {
  width: 85%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .footLeft {
    display: flex;
    font-size: 14px;
  }
}

// 下拉框内容背景色
.el-select-dropdown__item.selected,
.el-select-dropdown__item:hover,
.el-select-dropdown__item.hover {
  color: #fff;
  background: #409EFF;
}

:deep .el-popper.is-light {
  background: #fff;
  text-align: left
}

:deep .el-select-dropdown__item {
  color: #000;
}

.el-select {
  margin-left: 10px;
}
</style>